<template>
  <div id="header">
    <h1>heron's blog</h1>
    <el-menu
      :default-active="activeindex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="black"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1" ><router-link tag="el-menu-item" to="home">主页 </router-link> </el-menu-item>
      <el-menu-item index="2" > <router-link to="article">文章</router-link> </el-menu-item>
      <el-menu-item index="3" > <router-link to="project">project</router-link></el-menu-item>
      <el-menu-item index="4"><router-link to="timeline">时间轴</router-link></el-menu-item>
      <el-menu-item index="5"><router-link to="about">关于</router-link></el-menu-item>
    </el-menu>
    <el-row>
      <el-col :span="4"> <router-view name="leftside"></router-view>  </el-col>
      <el-col :span="20"> <router-view name="content"></router-view>  </el-col>
    </el-row>
  </div>
</template>

<script>
/**
 * 这里是目录，点击目录激活侧边栏，
*/


export default {
  // el:"header",
  name: 'Header',

  data() {
    return {
      activeindex:'1',
      HeaderIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.HeaderIndex = key;
      console.log(key, keyPath);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="css" scoped>
#header{
  border: 2px;
  background-color:blanchedalmond;
}
</style>
